<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.prime.com.tr/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    template="WEB-INF/facelets/template.xhtml">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <title>Music Webshop</title>
    </h:head>

    <h:body>

        <div id="main">
            <div id="top">
                <ui:insert name="top">
                    <img src="images/webshop_header.png"></img>
                    <h:form>  
                        <p:menubar>
                            <p:menuitem value="Home" url="index.xhtml" icon="ui-icon ui-icon-home"></p:menuitem>
                            <p:menuitem value="Shop" url="shop.xhtml" icon="ui-icon ui-icon-star"></p:menuitem>
                            <p:menuitem value="View Cart" url="viewCart.xhtml" icon="ui-icon ui-icon-extlink"></p:menuitem> 
                            <p:menuitem value="About Us" url="about.xhtml" icon="ui-icon ui-icon-arrowrefresh"></p:menuitem> 
                        </p:menubar>  
                    </h:form>
                </ui:insert>
            </div>
            <div>
                <div id="left">
                    <ui:insert name="left">
                        <p:panel header="Your shopping cart">
                            <h:outputText value="You have #{shoppingCartModelBean.getCartCount()} articles in your shopping cart"></h:outputText>
                            <p/>
                            <h:outputText value="Total cost: #{shoppingCartModelBean.getTotal()} kr."></h:outputText>
                        </p:panel>
                    </ui:insert>
                </div>
                <div>
                    <div id="right">
                        <ui:insert name="right">
                            <div id="logindiv" style="display: #{loginBean.loginDivVisibility()}">
                                <p:panel header="Login">
                                    <h:form>
                                        E-Mail: <h:inputText id="mailinput" value="#{loginBean.username}" size="16" required="true" validatorMessage="Must be at least 3 chars"/>
                                        Password: <h:inputSecret id="pwdinput" value="#{loginBean.password}" size="16" required="true" validatorMessage="Must be at least 3 chars"/>
                                        <!--                                        <p:messages id="msgs" showDetail="true" showSummary="true"/> -->
                                        <p:messages showDetail="true" showSummary="false"/>
                                        <p:commandButton id="loginbtn" value="Login" action="#{loginBean.login()}" update="@form" ></p:commandButton>
                                    </h:form>
                                    <h:form>
                                        <p>Not registered yet?</p>
                                        <p:commandButton value="Join now!" action="toRegister" ></p:commandButton></h:form>
                                </p:panel>
                            </div>
                            <div id="logggedindiv" style="display: #{loginBean.loggedinDivVisibility()}">
                                <p:panel header="Logged In">
                                    <h:form>
                                        <p>Welcome <h:outputText value="#{loginBean.user.name}"></h:outputText></p>
                                        <p:commandButton value="Log Out" action="#{loginBean.logout()}" ></p:commandButton>
                                    </h:form>
                                </p:panel>
                            </div>
                            <p:panel header="We offer these CD's and many more: ">
                                <p:imageSwitch effect="fade">  
                                    <ui:repeat value="#{imageSwitchBean.images}" var="image">  
                                        <p:graphicImage value="/images/#{image}"/>  
                                    </ui:repeat>  
                                </p:imageSwitch>
                                <p/>
                                <h:form>
                                    <p:commandButton value="Go to shop!" action="shop.xhtml" ajax="false" ></p:commandButton>
                                </h:form>
                            </p:panel>


                        </ui:insert>
                    </div>
                    <div id="content" class="center_content">
                        <ui:insert name="content">Center
                        </ui:insert>
                    </div>
                </div>
            </div>
            <div id="bottom">
                <ui:insert name="bottom">
                    <h:outputText value="Time: #{dateTimeSupportBean.currentDateTimeSupportBean}"></h:outputText>
                    <p/>
                    <h:outputText value="#{loginBean.checkLogin()}"></h:outputText>

                    <div id="pic" style="visibility: #{loginBean.adminButtonVisibility()}">
                        <h:link style="border: none" outcome="goToAdminPage" >
                            <h:graphicImage  value="/images/login.png" />
                        </h:link>
                    </div>
                </ui:insert>
            </div>
        </div>

    </h:body>

</html>
